import React, { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button.jsx'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.jsx'
import { Badge } from '@/components/ui/badge.jsx'
import { motion } from 'framer-motion'
import ScrollAnimation from './components/ScrollAnimation.jsx'
import FloatingElements from './components/FloatingElements.jsx'
import { 
  Menu, 
  X, 
  ChevronRight, 
  Sparkles, 
  Brain, 
  Users, 
  Zap, 
  Globe, 
  Shield,
  Play,
  ArrowRight,
  Star,
  CheckCircle
} from 'lucide-react'
import './App.css'

// 导入图片
import digitalHumanHero from './assets/images/digital-human-hero.jpeg'
import cyberpunkAvatar from './assets/images/cyberpunk-avatar.jpg'
import techBg from './assets/images/tech-bg.jpg'
import aiBg from './assets/images/ai-bg.jpg'

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [scrollY, setScrollY] = useState(0)

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY)
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const navigationItems = [
    { name: '首页', href: '#home' },
    { name: '产品服务', href: '#products' },
    { name: '解决方案', href: '#solutions' },
    { name: '成功案例', href: '#cases' },
    { name: '关于我们', href: '#about' },
    { name: '联系我们', href: '#contact' }
  ]

  const products = [
    {
      icon: <Brain className="w-8 h-8" />,
      title: "AI数字人定制",
      description: "基于先进AI技术，打造高度拟人化的数字虚拟人，支持多种风格和场景应用",
      features: ["超写实建模", "情感表达", "智能对话", "实时渲染"]
    },
    {
      icon: <Sparkles className="w-8 h-8" />,
      title: "Live2D动画制作",
      description: "专业Live2D技术团队，为您的虚拟角色注入生命力，实现流畅自然的动画效果",
      features: ["2D立体表现", "表情动作", "互动体验", "跨平台支持"]
    },
    {
      icon: <Zap className="w-8 h-8" />,
      title: "智能交互系统",
      description: "集成语音识别、自然语言处理等技术，打造智能化的人机交互体验",
      features: ["语音交互", "情感识别", "多语言支持", "个性化定制"]
    },
    {
      icon: <Globe className="w-8 h-8" />,
      title: "全场景应用",
      description: "覆盖直播、教育、客服、娱乐等多个领域，提供完整的数字人解决方案",
      features: ["直播带货", "在线教育", "智能客服", "虚拟偶像"]
    }
  ]

  const solutions = [
    {
      title: "文旅行业",
      description: "数字导游、景区讲解、文化传播",
      image: techBg,
      cases: ["智能导览", "文化展示", "互动体验"]
    },
    {
      title: "教育培训",
      description: "虚拟教师、在线课程、知识传授",
      image: aiBg,
      cases: ["在线教学", "培训讲解", "知识问答"]
    },
    {
      title: "企业服务",
      description: "品牌代言、客户服务、营销推广",
      image: digitalHumanHero,
      cases: ["品牌宣传", "客户咨询", "产品介绍"]
    },
    {
      title: "娱乐直播",
      description: "虚拟主播、内容创作、粉丝互动",
      image: cyberpunkAvatar,
      cases: ["直播带货", "内容创作", "粉丝互动"]
    }
  ]

  const stats = [
    { number: "1000+", label: "成功案例" },
    { number: "50+", label: "合作伙伴" },
    { number: "99%", label: "客户满意度" },
    { number: "24/7", label: "技术支持" }
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      <FloatingElements />
      {/* 导航栏 */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${
        scrollY > 50 ? 'bg-slate-900/95 backdrop-blur-md shadow-lg' : 'bg-transparent'
      }`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                  奇点引擎
                </h1>
              </div>
            </div>
            
            {/* 桌面导航 */}
            <div className="hidden md:block">
              <div className="ml-10 flex items-baseline space-x-4">
                {navigationItems.map((item) => (
                  <a
                    key={item.name}
                    href={item.href}
                    className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
                  >
                    {item.name}
                  </a>
                ))}
              </div>
            </div>

            {/*<div className="hidden md:block">*/}
            {/*  <Button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700">*/}
            {/*    预约演示*/}
            {/*  </Button>*/}
            {/*</div>*/}

            {/* 移动端菜单按钮 */}
            <div className="md:hidden">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-gray-300 hover:text-white"
              >
                {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>

        {/* 移动端菜单 */}
        {isMenuOpen && (
          <div className="md:hidden bg-slate-900/95 backdrop-blur-md">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              {navigationItems.map((item) => (
                <a
                  key={item.name}
                  href={item.href}
                  className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                  onClick={() => setIsMenuOpen(false)}
                >
                  {item.name}
                </a>
              ))}
              <Button className="w-full mt-4 bg-gradient-to-r from-blue-500 to-purple-600">
                预约演示
              </Button>
            </div>
          </div>
        )}
      </nav>

      {/* 英雄区域 */}
      <section id="home" className="relative pt-16 pb-20 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div 
              className="text-center lg:text-left"
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8 }}
            >
              <Badge className="mb-4 bg-blue-500/20 text-blue-300 border-blue-500/30">
                AI + Live2D 领先技术
              </Badge>
              <motion.h1 
                className="text-4xl md:text-6xl font-bold text-white mb-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
              >
                打造未来的
                <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                  数字虚拟人
                </span>
              </motion.h1>
              <motion.p 
                className="text-xl text-gray-300 mb-8 leading-relaxed"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
              >
                奇点引擎专注于AI驱动的Live2D数字虚拟人技术，为企业提供高质量的虚拟人定制服务，
                助力品牌在数字化时代脱颖而出。
              </motion.p>
              <motion.div 
                className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.6 }}
              >
                <Button size="lg" className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transform hover:scale-105 transition-all duration-200">
                  <Play className="w-5 h-5 mr-2" />
                  观看演示
                </Button>
                <Button size="lg" variant="outline" className="from-blue-500hover:bg-gray-800 transform hover:scale-105 transition-all duration-200">
                  了解更多
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>
              </motion.div>
            </motion.div>
            <motion.div 
              className="relative"
              initial={{ opacity: 0, x: 50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
            >
              <div className="relative z-10">
                <motion.img 
                  src={digitalHumanHero} 
                  alt="数字虚拟人" 
                  className="w-full h-auto rounded-2xl shadow-2xl"
                  whileHover={{ scale: 1.05 }}
                  transition={{ duration: 0.3 }}
                />
              </div>
              <div className="absolute -top-4 -right-4 w-72 h-72 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full blur-3xl opacity-20"></div>
              <div className="absolute -bottom-4 -left-4 w-72 h-72 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full blur-3xl opacity-20"></div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* 统计数据 */}
      <section className="py-16 bg-slate-800/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollAnimation>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
              {stats.map((stat, index) => (
                <motion.div 
                  key={index} 
                  className="text-center"
                  initial={{ opacity: 0, scale: 0.5 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <div className="text-3xl md:text-4xl font-bold text-white mb-2">
                    {stat.number}
                  </div>
                  <div className="text-gray-400">{stat.label}</div>
                </motion.div>
              ))}
            </div>
          </ScrollAnimation>
        </div>
      </section>

      {/* 产品服务 */}
      <section id="products" className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollAnimation className="text-center mb-16">
            <Badge className="mb-4 bg-purple-500/20 text-purple-300 border-purple-500/30">
              核心产品
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              专业的数字虚拟人解决方案
            </h2>
            <p className="text-xl text-gray-400 max-w-3xl mx-auto">
              基于前沿AI技术和Live2D动画技术，为不同行业提供定制化的数字虚拟人服务
            </p>
          </ScrollAnimation>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {products.map((product, index) => (
              <ScrollAnimation key={index} delay={index * 0.2}>
                <motion.div
                  whileHover={{ y: -10 }}
                  transition={{ duration: 0.3 }}
                >
                  <Card className="bg-slate-800/50 border-slate-700 hover:bg-slate-800/70 transition-all duration-300 group h-full">
                    <CardHeader>
                      <div className="flex items-center mb-4">
                        <motion.div 
                          className="p-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-white group-hover:scale-110 transition-transform duration-300"
                          whileHover={{ rotate: 360 }}
                          transition={{ duration: 0.5 }}
                        >
                          {product.icon}
                        </motion.div>
                      </div>
                      <CardTitle className="text-white text-xl">{product.title}</CardTitle>
                      <CardDescription className="text-gray-400">
                        {product.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="grid grid-cols-2 gap-2">
                        {product.features.map((feature, idx) => (
                          <div key={idx} className="flex items-center text-sm text-gray-300">
                            <CheckCircle className="w-4 h-4 text-green-400 mr-2" />
                            {feature}
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              </ScrollAnimation>
            ))}
          </div>
        </div>
      </section>

      {/* 解决方案 */}
      <section id="solutions" className="py-20 bg-slate-800/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-green-500/20 text-green-300 border-green-500/30">
              行业解决方案
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              覆盖多个行业的应用场景
            </h2>
            <p className="text-xl text-gray-400 max-w-3xl mx-auto">
              从文旅到教育，从企业服务到娱乐直播，我们的数字虚拟人技术已在多个领域成功应用
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {solutions.map((solution, index) => (
              <Card key={index} className="bg-slate-800/50 border-slate-700 overflow-hidden group hover:scale-105 transition-all duration-300">
                <div className="relative h-48 overflow-hidden">
                  <img 
                    src={solution.image} 
                    alt={solution.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent"></div>
                </div>
                <CardHeader>
                  <CardTitle className="text-white">{solution.title}</CardTitle>
                  <CardDescription className="text-gray-400">
                    {solution.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {solution.cases.map((case_, idx) => (
                      <div key={idx} className="flex items-center text-sm text-gray-300">
                        <Star className="w-4 h-4 text-yellow-400 mr-2" />
                        {case_}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA区域 */}
      <section className="py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-3xl p-12">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              准备开始您的数字虚拟人之旅？
            </h2>
            <p className="text-xl text-blue-100 mb-8">
              联系我们的专业团队，获取定制化的数字虚拟人解决方案
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-white text-blue-600 hover:bg-gray-100">
                <Users className="w-5 h-5 mr-2" />
                预约咨询
              </Button>
              <Button size="lg" variant="outline" className="border-white  hover:bg-white/10">
                查看案例
                <ChevronRight className="w-5 h-5 ml-2" />
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* 页脚 */}
      <footer className="bg-slate-900 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="col-span-1 md:col-span-2">
              <h3 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-4">
                奇点引擎
              </h3>
              <p className="text-gray-400 mb-4">
                专注于AI+Live2D数字虚拟人技术，为企业提供专业的虚拟人定制服务，
                助力品牌在数字化时代实现突破。
              </p>
              <div className="flex items-center text-gray-400">
                <Shield className="w-5 h-5 mr-2" />
                <span>技术驱动 · 品质保证</span>
              </div>
            </div>
            
            <div>
              <h4 className="text-white font-semibold mb-4">产品服务</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">AI数字人定制</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Live2D动画制作</a></li>
                <li><a href="#" className="hover:text-white transition-colors">智能交互系统</a></li>
                <li><a href="#" className="hover:text-white transition-colors">全场景应用</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="text-white font-semibold mb-4">联系我们</h4>
              <ul className="space-y-2 text-gray-400">
                <li>邮箱：chaoruipeng@sgnxai.com</li>
                <li>电话：400-888-0000</li>
                <li>地址：成都市郫都区</li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-slate-800 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2025 奇点引擎. 保留所有权利.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default App

